<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>

</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

        const root = ReactDOM.createRoot(document.getElementById("root"));

        class App extends React.Component {

            state = {
                userName: "zhangsan",
                password: 12345,
                city: 3,
                sex: "1",
                hobby: ["1", "2", "3"]
            }
            changeHandler(e) {
                let value = e.target.value;
                if (e.target.type === "checkbox") {
                    const copyState = [...this.state[e.target.name]];
                    const index = copyState.findIndex(v => v === e.target.value);
                    if (index > -1) copyState.splice(index, 1);
                    else copyState.push(e.target.value);

                    this.setState ({
                        [e.target.name]: copyState
                    })
                }else{
                    this.setState({
                        [e.target.name]: e.target.value,
                    })
                }
            }

            submitHandler(e){
                e.preventDefault();
                console.log("userName",this.state.userName);
                console.log("password",this.state.password);
                console.log("city",this.state.city/1);
                console.log("sex",this.state.sex/1);
                console.log("hobby",this.state.hobby);
            }
            render() {
                return (
                    <form onSubmit={this.submitHandler.bind(this)}>
                        <p>用户名： <input name={"userName"} onChange={this.changeHandler.bind(this)} value={this.state.userName} type="text"/>
                            </p>
                            <p>密码: <input name={"password"} onChange={this.changeHandler.bind(this)} value={this.state.password} type="passWord"/></p>

                            <p>
                                所在城市:
                                <select name="city" onChange={this.changeHandler.bind(this)} value={this.state.city}>
                                    <option value="1">北京</option>
                                    <option value="2">上海</option>
                                    <option value="3">武汉</option>
                                    <option value="4">西安</option>
                                    <option value="5">深圳</option>
                                    <option value="6">南白滩</option>
                                </select>     
                            </p>
                            <p>
                                性别:
                                <input type="radio" onChange={this.changeHandler.bind(this)} checked={this.state.sex==="1"} name={"sex"} value={1}/>男    
                                <input type="radio" onChange={this.changeHandler.bind(this)} checked={this.state.sex==="2"} name={"sex"} value={2}/>女    
                            </p>
                            <p>
                                爱好:
                                <input type="checkbox" name={"hobby"} onChange={this.changeHandler.bind(this)} checked= {this.state.hobby.includes("1")} value={1}/>学习
                                <input type="checkbox" name={"hobby"} onChange={this.changeHandler.bind(this)} checked= {this.state.hobby.includes("2")} value={2}/>电影
                                <input type="checkbox" name={"hobby"} onChange={this.changeHandler.bind(this)} checked= {this.state.hobby.includes("3")} value={3}/>游戏
                                <input type="checkbox" name={"hobby"} onChange={this.changeHandler.bind(this)} checked= {this.state.hobby.includes("4")} value={4}/>视频
                            </p>
                            <button>提交</button>
                    </form>
                )
            }
        }

        root.render(<App/>)
    </script>
</body>

</html>